<template>
	<view class="addresinfo">
		<u-navbar :titleStyle="{fontWeight:'bold'}" :title="!o_id?'新增地址':'编辑地址'" />
		<view class="addresinfo-card">
			<view class="addresinfo-form show" v-if="!o_id">
				<view class="addresinfo-item show" @click="importAddrs">
					<view class="addresinfo-totie">微信地址导入</view>
					<view class="addresinfo-input">
						<view class="picker">
							<u-input border="none" :clearable="false" disabled disabledColor="rgba(255,255,255,0)"
								suffixIcon="arrow-right" placeholder="点击选择微信地址" v-model="improt"></u-input>
						</view>
					</view>
				</view>
			</view>
			<view class="addresinfo-form">
				<view class="addresinfo-item top">
					<view class="addresinfo-totie">收件姓名</view>
					<view class="addresinfo-input">
						<u-input border="none" :clearable="false" placeholder="请输入收件人姓名" v-model="form.name"></u-input>
					</view>
				</view>
				<view class="addresinfo-item">
					<view class="addresinfo-totie">收件电话</view>
					<view class="addresinfo-input">
						<u-input border="none" type="number" :clearable="false" placeholder="请输入收件电话"
							v-model="form.phone"></u-input>
					</view>
				</view>
				<view class="addresinfo-item">
					<view class="addresinfo-totie">省市区</view>
					<view class="addresinfo-input">
						<!--  #ifdef  MP-WEIXIN	 -->
						<picker style="height: 30px;" @change="bindPickerChange" mode="region">
							<view class="picker">
								<u-input border="none" :clearable="false" disabled disabledColor="rgba(255,255,255,0)"
									suffixIcon="arrow-right" placeholder="请选择省市区" v-model="form.addr"></u-input>
							</view>
						</picker>
						<!--  #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<view @click="region_show=!region_show">
							<u-input border="none" :clearable="false" disabled disabledColor="rgba(255,255,255,0)"
								suffixIcon="arrow-right" placeholder="请选择省市区" v-model="form.addr"></u-input>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="addresinfo-item show">
					<view class="addresinfo-totie">详细地址</view>
					<view class="addresinfo-input">
						<u-input border="none" :clearable="false" placeholder="请输入详细地址" v-model="form.addr_extra">
						</u-input>
					</view>
				</view>
			</view>
		</view>
		<u-picke mode="region" :value="region_show" @cancel="region_show=false" @confirm="regionConfirm" />
		<statusbar bagr>
			<view class="address-botem" :style="{paddingBottom:!safeArea?'20px':''}">
				<button class="address-button cu-btn" @click="saveChang">保存</button>
			</view>
		</statusbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				region_show: false,
				id: '',
				form: {
					name: '',
					phone: '',
					addr: '',
					addr_extra: '',
				},
				improt:'',
				o_id: ''
			};
		},
		onLoad(e) {
			this.o_id = e.id
			if (Object.keys(this.addrs_data).length != 0) {
				const arr = ['name', 'phone', 'addr', 'addr_extra']
				for (let key in this.addrs_data) {
					if (arr.indexOf(key) > -1) {
						this.form[key] = this.addrs_data[key]
					}
				}
			}
		},
		methods: {
			importAddrs(){
				wx.chooseAddress({
				  success: (res) =>{
					  const { userName,provinceName,cityName,countyName,detailInfo,telNumber} = res
					  this.form.name = userName
					  this.form.phone = telNumber
					  this.form.addr = `${provinceName} ${cityName} ${countyName}`
					  this.form.addr_extra = detailInfo
				  }
				})
			},
			saveChang() {
				let state = false
				for (let key in this.form) {
					if (!this.form[key]) {
						state = true
					}
				}
				if (state) {
					this.$u.toast('请完善信息')
					return
				}
				this.form.id = this.o_id
				this.$network('/api/address/add', this.form).then(res => {
					this.$u.toast('保存成功')
					if (!this.o_id) {
						this.$u.vuex('addrs_show', true)
					} else {
						this.$u.vuex('addrs_data', this.form)
						this.$u.vuex('addrs_renew', true)
					}
					setTimeout(() => {
						uni.navigateBack()
					}, 700)
				})
			},
			regionConfirm(e) {
				const {
					province,
					city,
					area
				} = e
				this.form.addr = `${province.label} ${city.label} ${area.label}`
				this.region_show = !this.region_show
			},
			bindPickerChange(e) {
				const {
					value
				} = e.detail
				this.form.addr = `${value[0]} ${value[1]} ${value[2]}`
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}

	.addresinfo-card {
		padding: 20px;
	}

	.address-botem {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.address-button {
			width: 400rpx;
			height: 45px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 24px;
			background-color: #FFCF4F;
			font-size: 28rpx;
			color: #333;
			padding: 0;
			margin: 0;
			box-shadow: rgba(76, 153, 64, 0.3) 0px 7px 29px 0px;
		}
	}

	.addresinfo-form {
		background: #F7F7F7;
		border-radius: 10px;
		padding: 20px 0 0;
		margin-bottom: 20rpx;
		&.show{
			padding: 5px 0 0;
		}
		.addresinfo-item {
			width: 100%;
			min-height: 100rpx;
			margin-top: 30rpx;
			padding-right: 20rpx;

			&.top {
				margin-top: 0;
			}

			&.show {
				border: none;
			}

			.addresinfo-totie {
				font-size: 28rpx;
				color: #929292;
				padding-left: 20px;
				margin-bottom: 20rpx;
			}

			.addresinfo-input {
				padding-left: 20px;
			}

			border-bottom: 1px solid #ECECEC;
			padding-bottom: 30rpx;
		}
	}
</style>
